import React, {useEffect, useState} from 'react';

// 模拟延时
function seep(timeout) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve()
        }, timeout)
    })
}

// 模拟异步请求
async function getList() {
    await seep(2000);
    return ['小名', '第三方', '官方网站', '微软雅黑']
}

// 自定义Hooks
function useList() {
    // 存储数据状态
    const [list, setList] = useState(null)

    // 发送请求，存储到状态中
    async function request() {
        const listRes = await getList()
        setList(listRes)
    }

    // 第一次调用Hooks时执行，把数据存储到list状态中
    useEffect(request, [])

    // 返回状态的值
    return list
}

const CustomerHooks = () => {

    // 使用自定义的Hooks
    const list = useList()

    return (
        <div>
            <ul>
                {
                    list
                        ? list.map((item, index) => <li key={index}>{item}</li>)
                        : '数据加载中...'
                }
            </ul>
        </div>
    );
};

export default CustomerHooks;
